<template>
  <div class="container">
    <el-card class="login_box">
      <div style="display: flex;justify-content: center">
        <span style="color: #4B2C0F; font-size: 21px;">
          <strong>瓜瓜小说后台管理系统</strong>
        </span>
      </div>
      <el-form :model="loginRuleForm" :rules="loginRules" ref="loginRuleForm"  class="demo-ruleForm">
        <el-form-item prop="userName">
          <el-input style="margin-top: 30px" v-model="loginRuleForm.userName" prefix-icon="el-icon-user" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password" >
          <el-input v-model="loginRuleForm.password" prefix-icon="el-icon-lock" placeholder="密码" show-password></el-input>
        </el-form-item>
        <el-form-item prop="captcha">
          <el-row :gutter="20">
            <el-col :span="15">
              <el-input v-model="loginRuleForm.captcha" placeholder="验证码">
              </el-input>
            </el-col>
            <el-col :span="9" class="login-captcha">
              <img :src="codeUrl" @click="getCaptcha()" alt="" style="height: 40px">
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="dialogVisible = false" style="width: 100%"@click.native.prevent="handleLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import {login,getCodeImg,getCodeImg1} from 'api/login';
  import Cookies from 'js-cookie';
  import {setToken} from '@/utils/auth'
  import { getUUID } from '@/utils'
  export default {
    name: 'login',
    data() {
      return {
        loginRuleForm: {
          userName: '',
          password: '',
          uuid: '',
          captcha: ''
        },
        codeUrl: "",
        loginRules: {
          userName: [
            {required: true, message: '用户名不能为空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不能为空', trigger: 'blur'}
          ],
          captcha: [
            {required: true, message: '验证码不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    created() {
      this.getCaptcha();
    },
    methods: {
      handleClose() {
        this.dialogVisible = false
      },
      handleLogin() {
        this.$refs.loginRuleForm.validate(valid => {
          if (valid) {
            Cookies.set("userName", this.loginRuleForm.userName, { expires: 30 });
            Cookies.set("password", this.loginRuleForm.password, { expires: 30 });
            login(this.loginRuleForm).then(res => {
              console.log("login: ",res);
              setToken(res.data.token);
              this.$message.success("登录成功")
              //通过编程式导航跳转到，后台主页 路由地址是 '/home'
              this.$router.push('/Home_page')
            })
            // this.$store
            //   .dispatch("Login", this.loginRuleForm)
            //   .then(() => {
            //     this.$message.success("登陆成功")
            //   })
          }
        });
      },
      getCaptcha() {
        this.loginRuleForm.uuid = getUUID();
        //验证码方式一
        getCodeImg({uuid : this.loginRuleForm.uuid}).then(res => {
          this.codeUrl = "data:image/gif;base64," + res.data.img;
          this.captcha = res.data.code
        });
        //验证码方式二
        // this.codeUrl = getCodeImg1(`/sys/captchaImage?uuid=${this.loginRuleForm.uuid}`);
      },
    }
  }
</script>

<style scoped>

  .container{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("../assets/img/back2.png")  no-repeat;
    background-size: 100% 100%;

  }

  .login_box{
    width: 22%;
    height: 38%;
    border: 1px #838383 solid;
    border-radius: 10px;
    margin-left: 30%;
    background-color: whitesmoke;
  }

</style>
